import { Layout, Button, Dropdown, Menu,theme} from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
//引入react组件汇总进行属性类型验证的库，确保在组件接收到的props类型正确，从而减少运行时的错误
import PropTypes from 'prop-types';

const { Header } = Layout;

const AdminHeader = ({ collapsed, setCollapsed }) => {
    const navigate = useNavigate();
    const {
        token: { colorBgContainer},
    } = theme.useToken();

    const userMenu = (
        <Menu
            items={[
                {
                    key: '1',
                    icon: <LogoutOutlined />,
                    label: '退出',
                    onClick: () => {
                        localStorage.removeItem('token');
                        navigate('/');
                    }
                }
            ]}
        />
    );

    return (
        <Header style={{ padding: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: colorBgContainer }}>
            <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => setCollapsed(!collapsed)}
                style={{ fontSize: '16px', width: 64, height: 64 }}
            />
            <Dropdown overlay={userMenu}>
                <Button type="default" icon={<UserOutlined />} style={{ fontSize: '16px', color: '#1d1d1d' }}>
                    用户: xxx
                </Button>
            </Dropdown>
        </Header>
    );
};


AdminHeader.propTypes = {
    collapsed: PropTypes.bool.isRequired,
    setCollapsed: PropTypes.func.isRequired
};

export default AdminHeader;
